iT邦幫忙

DAY 17
3

SVG 與 D3.js系列 第 17

D3.js 究竟搭不搭捷運與死亡率有沒有關係?(2) - Google 試算表

  • 分享至 

  • xImage
  •  

上一篇提到資料是放在Google 試算表上,然後再透過web 前端去接資料,當初會想這麼做的原因有以下幾點:

  1. 資料路徑穩定,不易掛點
  2. 技術上只要成功一次,以後都沒問題
  3. 資料建立簡單,大部份的人都可以參與
  4. 可以多人協作

對我來說,資料怎麼接一直是很大的問題,也在想如果沒有後端技術,要處理資料是不是比較複雜,還好有Google Drive,不僅解決了資料處理以及介接的問題,還有許多的優點可以去活用。

相信試算表大部分功能大家都很熟悉了,這邊就只提幾個可以注意的小地方,供大家參考參考。

試算表路徑

https://docs.google.com/spreadsheets/d/1hX3lqWLHFuwYiQeaBL0WevleUEOBAPKzshj2fJHogsM/edit#gid=0

資料格式

資料怎麼找,就各憑本事了,能力好會用知道怎麼爬,能力普通可以像我一樣用Google搜尋就好,但是找來的資料格式許多都不是想要的,所以還是需要稍作整理,那麼就可以趁轉到Google Drive上時順便改成自己想要的格式。

就以時間來說,也可以趁這時候轉成西元年,並且套用成時間格式。

表格標頭

試算表的標頭,建議使用英文名稱,再轉成json後他會以key的方式呈現,就以百分比來說,他會像下面的方式呈現:

gsx$percent.$t

發佈到網路

這一段我找很多資料,看起來很複雜,其實很簡單,只是我關鍵字下錯了...。

匯出成json讓其它工具使用,經我略微的測試與該試算表的權限沒什麼關係,只要選擇 檔案 > 發佈到網路(位置會隨著版本不同而更換) ,接下來把該開啟的都打開就可以了。

如圖,我是把整份文件打開。

試算表的Key~

最後要接資料,每份試算表都有一組key,它是固定的,只要開一份新的試算表都會產生,在剛剛發佈到網路那動作網址列其中一段就是key。

https://spreadsheets.google.com/feeds/list/{Key}/{list}/public/values?alt=json-in-script&callback=?

另外還有一個是分頁的key,如果只有一個分頁,預設的key基本上是od6,但如果有超過兩個以上的分頁,試算表也會指定不同的key給分頁,查詢的方式如下連結。

https://spreadsheets.google.com/feeds/worksheets/{Key}/public/basic

如果有更好地搜尋方式也歡迎大家提供 > <。

Demo

接下來就來用一小段Code來測試是否可以使用,如果下面的範例成功,會抓取一些些資料顯示在下面,如果失敗的話會顯示”GG,沒戲唱了”。

http://wcc723.github.io/d3js/2014/10/16/Ironman-30-days-17/ 看完整DEMO

$(function(){
	var shPath = 'https://spreadsheets.google.com/feeds/list/',
	shKey = '1hX3lqWLHFuwYiQeaBL0WevleUEOBAPKzshj2fJHogsM',
	shCallback = '/public/values?alt=json-in-script&callback=?',
	shList = 'ol1cvs7'
	var dataset = []
	$.getJSON( shPath + shKey + '/' + shList + shCallback)
	.done(function (data) {	 //如果成功
		var entry = data.feed.entry //只取feed entry的部分
		var title = data.feed.title.$t
		dataset.push({
			'title': title,
			'data': entry
		}); //送回dataset
		console.log(dataset)
		$('.demo .log').text('success:' + dataset[0].title  + ',' + dataset[0].data[5].gsx$time.$t)

	})
	.fail(function(jqxhr, textStatus, error){
		$('.demo .log').text('GG,沒戲唱了'); //失敗
	});
});

上一篇
D3.js 究竟搭不搭捷運與死亡率有沒有關係?(1)
下一篇
D3.js 究竟搭不搭捷運與死亡率有沒有關係?(3) - 將資料繪製成折線圖
系列文
SVG 與 D3.js30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言